<script setup lang="ts">
import { useNaiveForm } from '@/hooks/common/form';

const { formRef, validate, restoreValidation } = useNaiveForm();

defineOptions({
  name: 'OrderSearch'
});
const model = defineModel<Api.SystemManage.GoodSearchParams>('model', { required: true });
interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}
const emit = defineEmits<Emits>();
async function reset() {
  model.value.goodName = '';
  await restoreValidation();
  emit('reset');
}

async function search() {
  await validate();
  emit('search');
}
</script>

<template>
  <div>
    <NCard :bordered="false" size="small" class="card-wrapper">
      <NCollapse>
        <NCollapseItem :title="$t('common.search')" name="order-search">
          <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
            <NGrid responsive="screen" item-responsive>
              <NFormItemGi span="24 s:12 m:6" :label="$t('order.orderName')" path="goodName" class="pr-24px">
                <NInput v-model:value="model.goodName" :placeholder="$t('order.fromorderName')" />
              </NFormItemGi>
              <NFormItemGi span="24 m:12" class="pr-24px">
                <NSpace class="w-full" justify="end">
                  <NButton @click="reset">
                    <template #icon>
                      <icon-ic-round-refresh class="text-icon" />
                    </template>
                    {{ $t('common.reset') }}
                  </NButton>
                  <NButton type="primary" ghost @click="search">
                    <template #icon>
                      <icon-ic-round-search class="text-icon" />
                    </template>
                    {{ $t('common.search') }}
                  </NButton>
                </NSpace>
              </NFormItemGi>
            </NGrid>
          </NForm>
        </NCollapseItem>
      </NCollapse>
    </NCard>
  </div>
</template>

<style scoped></style>
